<template>
    <el-menu unique-opened :default-active="route.name">
        <div v-for="(item, index) in menuData" :key="index" :hidden="item.hidden" class="bgg">

            <template v-if="item.children">
                <RouterLink :to="'/' + item.to">
                    <el-sub-menu :index="item.to">

                        <template #title>
                            <el-icon>
                                <component :is="item.img" />
                            </el-icon>
                            <!-- <el-icon class="wei">
                        <img :src="item.img ? '/notAct/' + item.img + '.png' : ''" alt="" width="18">
                    </el-icon>
                    <el-icon class="you">
                        <img :src="item.img ? '/act/' + item.img + '_1.png' : ''" alt="" width="18">
                    </el-icon> -->
                            <span>{{ item.title }}</span>
                        </template>

                        <div v-for="(liItem, liIndex) in item.children" :key="liIndex">

                            <!-- <el-sub-menu :index="liItem.id + ''" v-if="liItem.children">
                                <template #title>{{ liItem.title }}</template>
                                <div v-for="(liLiItem, liLiIndex) in liItem.children" :key="liLiIndex">
                                    <RouterLink :to="liLiItem.url">
                                        <el-menu-item :index="liLiItem.id + ''">
                                            {{ liLiItem.title }}
                                        </el-menu-item>
                                    </RouterLink>
                                </div>
                            </el-sub-menu>

                            <RouterLink :to="liItem.to" v-else> -->
                            <RouterLink :to="liItem.to">
                                <el-menu-item :index="liItem.id + ''">
                                    <el-icon>
                                        <component :is="liItem.img" />
                                    </el-icon>
                                    {{ liItem.title }}
                                </el-menu-item>
                            </RouterLink>

                        </div>

                    </el-sub-menu>
                </RouterLink>
            </template>

            <RouterLink :to="'/' + item.to" v-else>
                <el-menu-item :index="item.to">
                    <el-icon>
                        <component :is="item.img" />
                    </el-icon>
                    <!-- <el-icon class="wei">
                        <img :src="item.img ? '/notAct/' + item.img + '.png' : ''" alt="" width="18">
                    </el-icon>
                    <el-icon class="you">
                        <img :src="item.img ? '/act/' + item.img + '_1.png' : ''" alt="" width="18">
                    </el-icon> -->
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </RouterLink>


        </div>
    </el-menu>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from '../stores/index'
import { get } from '../request/axiosset'

const route = useRoute()
const store = useStore()


const getAsideMenu = e => {
    // menuData[1].children = e.map(item => ({
    //     id: item.id,
    //     title: item.name,
    //     img: 'Document',
    //     url: ''
    //     // url: '/edit?id=' + item.id
    // }))
    menuData[2].children = e.map(item => ({
        id: item.id,
        title: item.name,
        img: 'Document',
        to: { name: 'details', params: { children: item.name }, query: { id: item.id } }
        // to: { name: 'edit', params: { children: item.name }, query: { id: item.id } }
    }))
    console.log('👩‍🚒', menuData)
}
// watch(() => store.asideMenu, e => getAsideMenu(e), { deep: true })

const menuData = reactive([
    {
        title: '首页',
        to: 'home',
        img: 'House',
    },
    {
        title: '全部工程',
        img: 'Files',
        to: 'all',
        hidden: true,
        children: [
            {
                title: '1',
                img: 'Document',
                to: {}
            }
        ]
    },
    {
        title: '我的工程',
        img: 'Files',
        to: 'my',
        // children: [
            // {
            //     title: '3',
            //     img: 'Document',
            //     to: {}
            // }
        // ]
    },
//     {
//         title: '收藏',
//         to: 'star',
//         img: 'Star',
//     },
//     {
//         title: '回收站',
//         to: 'delete',
//         img: 'Delete',
//     },
])

// const menuData = reactive([
//     {
//         title: '数据概览',
//         url: 'DataOverview',
//         img: 'shujugailan'
//     },
//     {
//         title: '基本信息',
//         // url: '',
//         img: 'jibenxinxi',
//         children: [
//             {
//                 title: '学校信息详情',
//                 url: 'Schoollist'
//             },
//             {
//                 title: '学生管理',
//                 url: 'StuManage'
//             },
//             {
//                 title: '教职工管理',
//                 url: 'FacManage'
//             },
//         ]
//     },
//     {
//         title: '审批管理',
//         url: '',
//         img: 'shenpiguanli',
//         children: [
//             {
//                 title: '我的申请',
//                 url: 'Application'
//             },
//             {
//                 title: '我的审批',
//                 url: 'Approval'
//             }
//         ]
//     },
//     {
//         title: '订单中心',
//         url: '',
//         img: 'dingdanzhongxin',
//         children: [
//             {
//                 title: '就餐订单管理',
//                 url: 'Orders'
//             },
//         ]
//     },
//     {
//         title: '餐厅管理',
//         url: '',
//         img: 'cantingguanli',
//         children: [
//             {
//                 title: '档口管理',
//                 url: 'Subject'
//             },
//             {
//                 title: '餐次管理',
//                 url: 'Mealset'
//             },
//             {
//                 title: '餐品管理',
//                 url: 'Meal'
//             },
//             {
//                 title: '收银员管理',
//                 url: 'Cacher'
//             },
//             {
//                 title: '餐厅开餐日历',
//                 url: 'holidaySet'
//             },
//             {
//                 title: '食谱配置',
//                 url: 'MealWeek'
//             },
//         ]
//     },
//     {
//         title: '供应链管理',
//         url: '',
//         img: 'gongyinglianguanli',
//         children: [
//             {
//                 title: '食材库',
//                 url: 'SchoolIngredient'
//             },
//             {
//                 title: '采购管理',
//                 url: '',
//                 children: [
//                     {
//                         title: '食材采购',
//                         url: 'Purchase'
//                     },
//                     {
//                         title: '采购入库',
//                         url: 'Inventory'
//                     },
//                     {
//                         title: '采购退货',
//                         url: 'PurRenturn'
//                     },
//                 ]
//             },
//             {
//                 title: '采购订单管理',
//                 url: 'IngredientOrder'
//             },
//             {
//                 title: '食材库存管理',
//                 url: '',
//                 children: [
//                     {
//                         title: '库存查询',
//                         url: 'InventorySearch'
//                     },
//                     {
//                         title: '食材出库',
//                         url: 'OutWarehouse'
//                     },
//                     {
//                         title: '食材退库',
//                         url: 'FoodRenturn'
//                     },
//                 ]
//             },
//         ]
//     },
//     {
//         title: '设备管理',
//         url: '',
//         img: 'shebeiguanli',
//         children: [
//             {
//                 title: '设备信息管理',
//                 url: 'DevManage'
//             }
//         ]
//     },
//     {
//         title: '角色与权限',
//         url: '',
//         img: 'jueseyuquanxian',
//         children: [
//             {
//                 title: '角色管理',
//                 url: 'EruptRole'
//             },
//             {
//                 title: '账号管理',
//                 url: 'EruptUser'
//             },
//             {
//                 title: '菜单管理',
//                 url: 'EruptMenu'
//             },
//             {
//                 title: '审批流配置',
//                 url: 'AppConfig'
//             }
//         ]
//     },
//     {
//         title: '投诉与反馈',
//         url: '',
//         img: 'tousufankui',
//         children: [
//             {
//                 title: '投诉反馈',
//                 url: 'ComFeedback'
//             }
//         ]
//     }
// ])
</script>

<style scoped>
.el-menu {
    height: 100%;
}

.router-link-active {

    >>>.el-sub-menu__title,
    &>.el-menu-item {
        color: var(--pyColor)
    }
}
</style>

<style>
a {
    text-decoration: none;
}
</style>